<template>
  <div class="bg">
      <div class="wholebox">
          <div class="sign"><h1>Login</h1></div>
          <form class="inputbox" action="">
            <effect-input v-model="loginForm.username" type="hoshi" label="用户名"></effect-input>
            <br>
            <effect-input v-model="loginForm.password" type="hoshi" label="密码"></effect-input>
            <br>
            <button class="btn" @click="loginClick()" type="button">登录</button>
          </form>
      </div>
  </div>
</template>

<script>
export default {
  props: {
  },
  components: {
  },
  data() {
    return {
        loginForm:{
            username:'',
            password:'',
        }
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
      loginClick(){
          console.log(this.loginForm.username,this.loginForm.password)
          if(this.loginForm.username===''||this.loginForm.password===''){
              this.$toast('请输入用户名和密码')
          }else{
              this.$http.post('/api/login',this.loginForm).then(
                  response=>{
                      console.log('Login',response.data)
                      this.$auth.setAuthorization(response.data.token)
                      this.$router.push('/my')
                  },error=>{
                      console.log('Login',error.msg)
                  }
              )
          }
      }
  },
};
</script>
<style scoped lang="less">
.bg{
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    font-family: 'Open Sans',sans-serif;
    background: url('@/assets/bg4.jpg');
    background-size: cover;
}
h1{
    color: white;
    letter-spacing: 3px;
    text-align: center;
    font-size: 2em;
}
.btn{
    height: 40px;
    width: 250px;
    background-color: rgb(187,179,188,0.9);
    border: none;
    color: white;
    font-size: 15px;
    border-radius: 8px;
}
.sign{
    font-size: 20px;
    margin-bottom: 20px;
}
.wholebox{
    margin-top: 200px;
}
</style>